Vue.component('blog-item', {
  props: {blog:{},index:0},
  template: [
			'<div class="tm-news-item">',
				'<div v-if="index % 2 === 0" class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container" >',
					'<img v-bind:src="blog.blogPhoto" alt="Image" class="img-fluid tm-news-item-img" />',
				'</div>',
				'<div v-if="index % 2 != 0" class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 flex-order-2 tm-news-item-img-container" >',
					'<img v-bind:src="blog.blogPhoto" alt="Image" class="img-fluid tm-news-item-img" />',
				'</div>',
				'<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container">',
					'<h2 class="tm-news-title dark-gray-text">{{blog.blogTitle}}--</h2>',
					'<p class="tm-news-text">{{blog.blogContext}}</p>',
					'<a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Preview</a>',
				'</div>',
			'</div>'
  ].join('')
})
var vm = new Vue({
  el: '#blogs',
  data: {
    blogs: {}
  },
  methods: {
		getUser:function(){},
		getBlogs:function(){
			$.post("/b/1",function(data,status){
				vm.blogs = data;
			});
		},
		getPhotos:function(){}
  },
  created:function() {
		this.getBlogs();
  }
})